<!-- 遍历方法 -->
<template>
    <div class="doc-content-wrapper">
        <div class="doc-content-container">
            <div class="doc-content">
                <h1 class="text-4xl mb-6">遍历方法</h1>
                
                <h2 class="mb-5">for方法</h2>
                <Codemirror :code="forCode" name="for" class="mb-10" />
                
                <h2 class="mb-5">for...in方法</h2>
                <p class="mb-3 text-base">for in循环是用来遍历对象的。要知道JavaScript对象的所有属性都是字符串，不过属性对应的值可以是任意数据类型。（注意：遍历时不仅能读取对象自身上面的成员属性，也能遍历出对象的原型属性）</p>
                <Codemirror :code="forinCode" name="for...in" class="mb-10" />
                
                <h2 class="mb-5">for...of方法</h2>
                <Codemirror :code="forofCode" name="for...of" class="mb-10" />
                
                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" target="_blank">Array.forEach()方法</a><el-tag class="ml-2">ES5</el-tag></h2>
                <p class="mb-3 text-base">
                    forEach()和map()方法通常用于遍历Array元素<br>
                    forEach：返回undefined；用来遍历数组中的每一项，不影响原数组<br>
                    map：返回一个包含已转换元素的新数组；支持return，相当于与原数组克隆了一份，把克隆的每项改变了，也不影响原数组
                </p>
                <Codemirror :code="forEachCode" name="Array.forEach()" class="mb-10" />
                
                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map" target="_blank">Array.map()方法</a><el-tag class="ml-2">ES5</el-tag></h2>
                <p class="mb-3 text-base">map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。</p>
                <Codemirror :code="mapCode" name="Array.map()" class="mb-10" />
                
                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" target="_blank">Array.filter()方法</a><el-tag class="ml-2">ES5</el-tag></h2>
                <p class="mb-3 text-base">filter用于对数组进行过滤。<br>
                    filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。<br>
                    filter() 不会对空数组进行检测；不会改变原始数组</p>
                <Codemirror :code="filterCode" name="Array.filter()" class="mb-10" />
                
                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find" target="_blank">Array.find()方法</a><el-tag class="ml-2">ES6</el-tag></h2>
                <p class="mb-3 text-base">遍历数组，找到第一个符合条件的项，并返回该项；不会继续遍历数组；否则返回undefined，不会改变数组</p>
                <Codemirror :code="findCode" name="Array.find()" class="mb-10" />
                
                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex" target="_blank">Array.findIndex()方法</a><el-tag class="ml-2">ES6</el-tag></h2>
                <p class="mb-3 text-base">遍历数组找到第一个符合条件的项，并返回该项的索引值；不会继续遍历数组；否则返回-1。不会改变数组</p>
                <Codemirror :code="findIndexCode" name="Array.findIndex()" class="mb-10" />
                
                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some" target="_blank">Array.some()方法</a><el-tag class="ml-2">ES5</el-tag></h2>
                <p class="mb-3 text-base">如果有一个元素满足条件，则表达式返回true，剩余的元素不会再执行检测。<br>如果没有满足条件的元素，则返回false。<br>返回值是布尔值</p>
                <Codemirror :code="someCode" name="Array.some()" class="mb-10" />
                
                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every" target="_blank">Array.every()方法</a><el-tag class="ml-2">ES5</el-tag></h2>
                <p class="mb-3 text-base">如果数组中有一个元素不满足，则整个表达式返回false；且剩余的元素不会再进行检测<br>如果所有元素都满足条件，则返回true。<br>返回值是布尔值</p>
                <Codemirror :code="everyCode" name="Array.every()" class="mb-10" />
                
                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce" target="_blank">Array.reduce()方法</a><el-tag class="ml-2">ES5</el-tag></h2>
                <p class="mb-3 text-base">接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。<br>第二个参数作为第一次调用的a的值</p>
                <Codemirror :code="reduceCode" name="Array.reduce()" class="mb-10" />
                
                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes" target="_blank">Array.includes()方法</a><el-tag class="ml-2">ES2016</el-tag></h2>
                <p class="mb-3 text-base">检查元素是否存在于数组中</p>
                <Codemirror :code="includesCode" name="Array.includes()" class="mb-10" />
            </div>
        </div>
    </div>
    
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    components: {
    },
    setup () {
        const forCode = ref(`const arr = [11, 22, 33, 44, 55, 66, 77, 88];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}`)

        const forinCode = ref(`let obj = {a:1, b:2, c:3};
for (let prop in obj) {    // prop指对象的属性名
    console.log(prop, obj[prop]);
}`)

        const forofCode = ref(`let arr = ['123','apple','fish'];
for(let item of arr){
    console.log(item);
}`)

        const forEachCode = ref(`const arr = [11, 22, 33, 44, 55, 66, 77, 88];
arr.forEach(item => {
    console.log(item);
});`)

        const mapCode = ref(`const arr = [11, 22, 33, 44, 55];
var newArr = arr.map((value, index) => {
    console.log(value + "----" + index);
    return value * 10;
});
console.log(newArr);`)

        const filterCode = ref(`const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);`)

        const findCode = ref(`const array = [5, 10, 99, 130, 44];

const found = array.find(element => element > 10);

console.log(found);`)

        const findIndexCode = ref(`const array = [1,5,10,15].findIndex(function(value,index,arr){
 return value > 9
})

console.log(array);`)

        const someCode = ref(`var ages = [3, 18, 17, 16]
 var checkoutVal = function checkout (age) {
   console.log('test：',age >= 18) // false true  有一个满足条件的会停止检测剩余的元素
   return age >= 18
 }
 console.log('out：',ages.some(checkoutVal))`)

        const everyCode = ref(`let everyArr = [2,3,4];
let everyResult = everyArr.every((item, index)=>{
  return item > 0
});
console.log(everyResult);

console.log('------------------------------------')

var ages = [3, 18, 17, 16]
const fn = (currentValue) => currentValue < 40
console.log(ages.every(fn)) // true  值全都符合函数条件`)

        const reduceCode = ref(`let reduceArr = [0,1,2,3,4]
let reduceResult = reduceArr.reduce((a, b)=>{
  console.log(a, b, a + b)
  return a + b;
});
console.log(reduceResult);`)

        const includesCode = ref(`const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.includes("Mango")); // 为 true`)

        return {
            forCode,
            forinCode,
            forofCode,
            forEachCode,
            mapCode,
            filterCode,
            findCode,
            findIndexCode,
            someCode,
            everyCode,
            reduceCode,
            includesCode,
        }
    }
})
</script>

<style scoped>

</style>